<template>
  <div class="container">
    <div class="pic">
      <img :src="avatar_s500" alt="">
      <div class="name">{{ name }}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name:'titles',
    data(){
      return{

      }
    },
    props:{
      avatar_s500:{
        type:[String,Number],
        default:0
      },
      name:{
        type:[String,Number],
        default:0
      }
    }
  }
</script>

<style scoped>
.container{
  width: 100%;
  height: 100%;
}

.pic{
  width: 100%;
  display: block;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  position: relative;
}

.pic::before{
  /* 背景模糊 */
  filter: blur(5px);
  content:'';
  position:absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* 渐变色 */
  background: linear-gradient(to right, gray, white , gray);
  margin-left: -28.5%
}

.pic img{
  width: 30%;
  height: 70%;
  border-radius: 50%;
  padding: 1.5em;
}

.name{
  margin-top: -10px;
  font-size: 22px;
  font-weight: 600
}
</style>